<template>
	<div class="market_information">
		<ion-content12>
			<div class="header">
				<img src="../../../../static/imgs/market_icon.png" width="34" height="auto" class="market_icon_bar">
				<h3>行情信息</h3>
				<div class="right">
					<a target="_blank" href="http://lhang.radarwin.com/fullScreen.html">专业交易</a>
					<a target="_blank" href="http://lhang.radarwin.com/fullScreen.html">
						<img class="market_right_icon" src="../../../../static/imgs/market_right_icon.png" width="22" height="22"/>
					</a>
				</div>
			</div>
			<div class="body">
				<div class="tabs">
					<span v-on:click="change_l_m_s('lhang_tickers')" :class="{ 'active': lhang_market_type == 'lhang_tickers' }">链行行情</span>
					<span v-on:click="change_l_m_s('multi_platform_btc_cny_ticker')" :class="{ 'active': lhang_market_type == 'multi_platform_btc_cny_ticker' }">多平台BTC行情</span>
					<span v-on:click="change_l_m_s('multi_platform_zec_cny_ticker')" :class="{ 'active': lhang_market_type == 'multi_platform_zec_cny_ticker' }">多平台ZEC行情</span>
					<span v-on:click="change_l_m_s('multi_platform_etc_cny_ticker')" :class="{ 'active': lhang_market_type == 'multi_platform_etc_cny_ticker' }">多平台ETH行情</span>
					<span v-on:click="change_l_m_s('multi_platform_eth_cny_ticker')" :class="{ 'active': lhang_market_type == 'multi_platform_eth_cny_ticker' }">多平台ETC行情</span>
				</div>
				<div>
					<!--<lhang-market></lhang-market>-->
					<div v-if="lhang_market_type == 'lhang_tickers'">
						<ul class="lm_ul">
							<li class="title">
								<span>交易对</span>
								<span>最新成交价</span>
								<span>涨幅</span>
								<span>最高价/最低价</span>
								<span>24小时成交量</span>
							</li>
							<li v-for="item in lhhq">
								<span>{{item.symbol}}</span>
								<span>￥{{item.lastPrice}}</span>
								<span>{{item.change}}%</span>
								<span>￥{{item.highPrice}}/￥{{item.lowPrice}}</span>
								<span>
									<i v-if="item.symbol == 'BTC/CNY'">1</i>
									<i v-if="item.symbol == 'ZEC/CNY'">2</i>
									<i v-if="item.symbol == 'ETC/CNY'">3</i>
									<i v-if="item.symbol == 'ETH/CNY'">4</i>
									{{item.vol}}
								</span>
							</li>
						</ul>
					</div>
					<div v-if="lhang_market_type == 'multi_platform_btc_cny_ticker'">
						<ul class="lm_ul">
							<li class="title">
								<span>交易平台</span>
								<span>最新成交价</span>
								<span>涨幅</span>
								<span>最高价/最低价</span>
								<span>24小时成交量</span>
							</li>
							<li v-for="item in hq_btc">
								<span>{{item.platform}}</span>
								<span>￥{{item.lastPrice}}</span>
								<span>{{item.change}}%</span>
								<span>￥{{item.highPrice}}/￥{{item.lowPrice}}</span>
								<span>
									<i v-if="item.symbol == 'BTC/CNY'">1</i>
									<i v-if="item.symbol == 'ZEC/CNY'">2</i>
									<i v-if="item.symbol == 'ETC/CNY'">3</i>
									<i v-if="item.symbol == 'ETH/CNY'">4</i>
									{{item.vol}}
								</span>
							</li>
						</ul>
					</div>
					<div v-if="lhang_market_type == 'multi_platform_zec_cny_ticker'">
						<ul class="lm_ul">
							<li class="title">
								<span>交易平台</span>
								<span>最新成交价</span>
								<span>涨幅</span>
								<span>最高价/最低价</span>
								<span>24小时成交量</span>
							</li>
							<li v-for="item in hq_zec">
								<span>{{item.platform}}</span>
								<span>￥{{item.lastPrice}}</span>
								<span>{{item.change}}%</span>
								<span>￥{{item.highPrice}}/￥{{item.lowPrice}}</span>
								<span>
									<i v-if="item.symbol == 'BTC/CNY'">1</i>
									<i v-if="item.symbol == 'ZEC/CNY'">2</i>
									<i v-if="item.symbol == 'ETC/CNY'">3</i>
									<i v-if="item.symbol == 'ETH/CNY'">4</i>
									{{item.vol}}
								</span>
							</li>
						</ul>
					</div>
					<div v-if="lhang_market_type == 'multi_platform_etc_cny_ticker'">
						<ul class="lm_ul">
							<li class="title">
								<span>交易平台</span>
								<span>最新成交价</span>
								<span>涨幅</span>
								<span>最高价/最低价</span>
								<span>24小时成交量</span>
							</li>
							<li v-for="item in hq_etc">
								<span>{{item.platform}}</span>
								<span>￥{{item.lastPrice}}</span>
								<span>{{item.change}}%</span>
								<span>￥{{item.highPrice}}/￥{{item.lowPrice}}</span>
								<span>
									<i v-if="item.symbol == 'BTC/CNY'">1</i>
									<i v-if="item.symbol == 'ZEC/CNY'">2</i>
									<i v-if="item.symbol == 'ETC/CNY'">3</i>
									<i v-if="item.symbol == 'ETH/CNY'">4</i>
									{{item.vol}}
								</span>
							</li>
						</ul>
					</div>

					<div v-if="lhang_market_type == 'multi_platform_eth_cny_ticker'">
						<ul class="lm_ul">
							<li class="title">
								<span>交易平台</span>
								<span>最新成交价</span>
								<span>涨幅</span>
								<span>最高价/最低价</span>
								<span>24小时成交量</span>
							</li>
							<li v-for="item in hq_eth">
								<span>{{item.platform}}</span>
								<span>￥{{item.lastPrice}}</span>
								<span>{{item.change}}%</span>
								<span>￥{{item.highPrice}}/￥{{item.lowPrice}}</span>
								<span>
									<i v-if="item.symbol == 'BTC/CNY'">1</i>
									<i v-if="item.symbol == 'ZEC/CNY'">2</i>
									<i v-if="item.symbol == 'ETC/CNY'">3</i>
									<i v-if="item.symbol == 'ETH/CNY'">4</i>
									{{item.vol}}
								</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</ion-content12>
	</div>
</template>

<script>
	//	import lhangMarket from './lhang_market'
	import store from '../../../vuex/store'
	export default {
		name: 'login_pannel',
		data() {
			return {
				content: "宝宝是行情信息",
				lhang_market_type: "lhang_tickers",
				lhhq_type: 'BTC/CNYZEC/CNYETC/CNYETH/CNY',
				lhhq: [{
					symbol: 'BTC/CNY',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					symbol: 'ZEC/CNY',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					symbol: 'ETC/CNY',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					symbol: 'ETH/CNY',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
				hq_btc_type: '链行OKCoin火币中国比特币',
				hq_btc: [{
					platform: '链行',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: 'OKCoin',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '火币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '中国比特币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
				hq_zec_type: '链行云币元宝Bitfinex',
				hq_zec: [{
					platform: '链行',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '云币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '元宝',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: 'Bitfinex',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
				hq_etc_type: '链行云币CHBTCBitfinex',
				hq_etc: [{
					platform: '链行',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '云币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: 'Bitfinex',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
				hq_eth_type: '链行云币CHBTCBitfinex',
				hq_eth: [{
					platform: '链行',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '云币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: 'Bitfinex',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
			}
		},
		computed: {
			socket() {
				return this.$store.getters.multi_platform;
			}
		},
		components: {}, //这里注册
		methods: {
			change_l_m_s: function(type) {
				this.lhang_market_type = type;
			}
		},
		mounted() {
			var that = this;

			//获取深度
			store.dispatch('sned', [{
				channel: 'multi_platform_lhang_tickers'
			}, {
				channel: 'multi_platform_btc_cny_ticker'
			}, {
				channel: 'multi_platform_zec_cny_ticker'
			}, {
				channel: 'multi_platform_etc_cny_ticker'
			}, {
				channel: 'multi_platform_eth_cny_ticker'
			}])

		},
		watch: {
			// 如果 question 发生改变，这个函数就会运行
			socket: function(res) {
				var that = this;
				switch(res.channel) {
					case 'multi_platform_lhang_tickers':
						if(this.lhhq_type.indexOf(res.data.symbol) >= 0) {
							for(var i in that.lhhq) {
								if(this.lhhq[i].symbol == res.data.symbol) {
									if(res.data.lastPrice) {
										this.lhhq[i].lastPrice = res.data.lastPrice;
										this.lhhq[i].change = res.data.change;
										this.lhhq[i].highPrice = res.data.highPrice;
										this.lhhq[i].lowPrice = res.data.lowPrice;
										this.lhhq[i].vol = res.data.vol;
									}
								}
							}
						} else {
							that.lhhq.push(res.data)
							that.lhhq_type += res.data.symbol;
						}
						break;
					case 'multi_platform_btc_cny_ticker':
						if(this.hq_btc_type.indexOf(res.data.platform) >= 0) {
							for(var i in that.hq_btc) {
								if(this.hq_btc[i].platform == res.data.platform) {
									if(res.data.lastPrice) {
										this.hq_btc[i].lastPrice = res.data.lastPrice;
										this.hq_btc[i].change = res.data.change;
										this.hq_btc[i].highPrice = res.data.highPrice;
										this.hq_btc[i].lowPrice = res.data.lowPrice;
										this.hq_btc[i].vol = res.data.vol;
									}
								}
							}
						} else {
							that.hq_btc.push(res.data)
							that.hq_btc_type += res.data.platform;
						}
						break;
					case 'multi_platform_zec_cny_ticker':
						if(this.hq_zec_type.indexOf(res.data.platform) >= 0) {
							for(var i in that.hq_zec) {
								if(this.hq_zec[i].platform == res.data.platform) {
									if(res.data.lastPrice) {
										this.hq_zec[i].lastPrice = res.data.lastPrice;
										this.hq_zec[i].change = res.data.change;
										this.hq_zec[i].highPrice = res.data.highPrice;
										this.hq_zec[i].lowPrice = res.data.lowPrice;
										this.hq_zec[i].vol = res.data.vol;
									}
								}
							}
						} else {
							that.hq_zec.push(res.data)
							that.hq_zec_type += res.data.platform;
						}
						break;
					case 'multi_platform_etc_cny_ticker':
						if(this.hq_etc_type.indexOf(res.data.platform) >= 0) {
							for(var i in that.hq_etc) {
								if(this.hq_etc[i].platform == res.data.platform) {
									if(res.data.lastPrice) {
										this.hq_etc[i].lastPrice = res.data.lastPrice;
										this.hq_etc[i].change = res.data.change;
										this.hq_etc[i].highPrice = res.data.highPrice;
										this.hq_etc[i].lowPrice = res.data.lowPrice;
										this.hq_etc[i].vol = res.data.vol;
									}
								}
							}
						} else {
							that.hq_etc.push(res.data)
							that.hq_etc_type += res.data.platform;
						}
						break;
					case 'multi_platform_eth_cny_ticker':
						if(this.hq_eth_type.indexOf(res.data.platform) >= 0) {
							for(var i in that.hq_eth) {
								if(this.hq_eth[i].platform == res.data.platform) {
									if(res.data.lastPrice) {
										this.hq_eth[i].lastPrice = res.data.lastPrice;
										this.hq_eth[i].change = res.data.change;
										this.hq_eth[i].highPrice = res.data.highPrice;
										this.hq_eth[i].lowPrice = res.data.lowPrice;
										this.hq_eth[i].vol = res.data.vol;
									}
								}
							}
						} else {
							that.hq_eth.push(res.data)
							that.hq_eth_type += res.data.platform;
						}
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.market_information {
		.body {
			margin-top: 40px;
			margin-bottom: 40px;
			.tabs {
				overflow: auto;
				span {
					cursor: pointer;
					float: left;
					padding: 9.5px 33px;
					color: #0093f1;
				}
				.active {
					background: #0093f1;
					color: white;
				}
			}
			.lm_ul {
				li {
					height: 45px;
					span {
						height: 45px;
						line-height: 45px;
						width: 200px;
						display: inline-block;
						margin-left: 45px;
						font-size: 14px;
					}
					span:first-child {
						margin: 0px;
					}
				}
				li:hover {
					background: #F2F9FE;
				}
				.title:hover {
					background: #fff;
				}
				.title {
					span {
						border-bottom: solid 2px #0093F1;
						color: #9B9B9B;
					}
				}
			}
		}
		.header {
			width: 100%;
			height: 47px;
			line-height: 47px;
			vertical-align: middle;
			background: linear-gradient(to bottom, #fff 1%, rgba(0, 147, 241, .12));
			text-align: left;
			.market_icon_bar {
				margin-left: 25px;
			}
			h3 {
				font-size: 28px;
				padding-left: 20px;
				margin: 0px;
				display: inline;
			}
			.right {
				float: right;
				padding-right: 10px;
				a {
					color: #0093F1;
					cursor: pointer;
					padding-right: 10px;
					font-size: 12px;
				}
				.market_right_icon {
					position: relative;
					top: 7px;
				}
			}
		}
	}
</style>